.VommondColorPickerSketch{
	width: 300px;
}
.VommondColorPickerSketchSaturationCntr{
	height: 200px;
	width: 100%;
	background:#cecece;
	position:relative;
}

.VommondColorPickerSketchSaturationCntrWhite{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background: linear-gradient(to right, #fff, rgba(255,255,255,0))
}

.VommondColorPickerSketchSaturationCntrBlack{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background: linear-gradient(to top, #000, rgba(0,0,0,0))
}

.VommondColorPickerSketchSaturationPointer{
	position:absolute;
	top:10px;
	left:10px;
}
.VommondColorPickerSketchSaturationPointerCirle{
  cursor: head;
  width: 4px;
  height: 4px;
  box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);
  border-radius: 50%;
  transform: translate(-2px, -2px);
}


.VommondColorPickerSketchBody{
	padding: 5px 0px;
}

.VommondColorPickerSketch .VommondColorPickerNumberInput{
	width:38px;
	border:1px solid #cecece;
	margin: 0px;
	font-size: 14px;
}

.VommondColorPickerSketch .VommondColorPickerHexInput{
	width:70px;
	border:1px solid #cecece;
	margin: 0px;
	font-size: 14px;
}

.VommondColorPickerSketch .VommondColorPickerNumberInput:hover,
.VommondColorPickerSketch .VommondColorPickerHexInput:hover {
	border:1px solid #999;
}

.VommondColorPickerSketch .VommondColorPickerNumberInput:focus,
.VommondColorPickerSketch .VommondColorPickerHexInput:focus {
	border:1px solid #777;
}

.VommondColorPickerSketchControlCntr{
 	display: flex;
    width:100%;
    justify-content: space-between;

}

.VommondColorPickerSketchControlLabels{
    display: flex;
    width:100%;
    justify-content: space-between;
	text-align: center;
	font-size: 10px;
	color:#777;
}

.VommondColorPickerSketchControlLabels span{
	display: inline-block;
	width:50px;
}

.VommondColorPickerSketchControlLabels span:FIRST-CHILD{
	width:100px;
}

.VommondColorPickerSketchSliderAndPreview{
	display: flex;
    width:100%;
    justify-content: space-between;
}

.VommondColorPickerSketchSliderCntr{
	width:240px;
	display: inline-block;
}

.VommondColorPickerSketchHue{
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  width:100%;
  height:15px;
  margin-bottom:10px;
  position:relative;
}

.VommondColorPickerSketchAlpha {
	background: linear-gradient(to right, #fff 0%,  #000 100%);
	width:100%;
	height:15px;
	margin-bottom:10px;
	position:relative;
}

.VommondColorPickerSketchHuePointer{
	position:absolute;
	top:0px;
	left:10px;
}

.VommondColorPickerSketchHuePointerBox{
	 cursor: pointer;
	 width: 4px;
	 height: 15px;
	 box-shadow: 0 0 2px rgba(0, 0, 0, .6);
	 background: #fff;
	 transform: translateX(-2px);
}

.VommondColorPickerSketchPreviewCntr{
	width: 50px;
	padding: 5px;
	display: flex;
	flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
}


.VommondColorPickerSketchPreview{
	width: 40px;
	height: 40px;
	border-radius: 40px;

	display: inline-block;
	border: 1px solid rgba(0,0,0, 0.15);
}

.VommondColorPickerSketchEyeDropper {
	text-align: center;

}

.VommondColorPickerSketchEyeDropper .mdi {
	cursor: pointer;
	font-size: 20px;
	color: #777;
}

.VommondColorPickerSketchEyeDropper .mdi:hover {
	color: #333;
}
